<template>
    <div>
        <p>年龄:{{age}} </p>
            <button @click="age++">增加年龄</button> 
        <p>姓名:{{ user.name }}</p>
        <input placeholder="请输入姓名" v-model="user.name"/>
        <p>城市：{{city}}</p>
        <input placeholder="请输入城市" v-model="city"/>
        <p>邮箱：{{email}}</p>
        <input placeholder="请输入邮箱" v-model="email"/>
    </div>
</template>

<script setup>
    import { reactive, ref, toRef, toRefs } from 'vue';
    const age =ref(25)
    const user=reactive({
        name:"张三",
        address:{
            city:"北京",
            country:"中国"
        },
        email:'zhangsan@example.com'
    })
    //toref
    const city=toRef(user.address,"city")
    const {email}=toRefs(user)
      //定时器
        setTimeout(()=>{
            age.value++;//年龄
            user.name="李四";
            city.value='上海';
            email.value="lisi1234564@example.com"
        },5000)
        




</script>